<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Basics</title>
</head>
<body>

  <!-- Simple image -->
  <img src="https://picsum.photos/300/300" alt="Just image">

  <!-- Responsive image -->
  <picture>
    <source media="(min-width: 1024px)" srcset="https://picsum.photos/600/600">
    <source media="(min-width: 768px)" srcset="https://picsum.photos/300/300">
    <source media="(min-width: 360px)" srcset="https://picsum.photos/100/100">
    <img src="https://picsum.photos/300/300" alt="Just image">
  </picture>

  <!-- Image with semantic description -->
  <figure>
    <img src="https://picsum.photos/300/300" alt="Just image" />
    <figcaption>It is a simple description for a picture above</figcaption>
  </figure>

  <!-- Images with semantic description -->
  <figure>
    <img src="https://picsum.photos/300/300" alt="Just image" />
    <img src="https://picsum.photos/300/300" alt="Just image" />
    <img src="https://picsum.photos/300/300" alt="Just image" />
    <figcaption>
      <p>It is a simple description for a couple pictures above.It is a simple description for a couple pictures above.It is a simple description for a couple pictures above</p>
    </figcaption>
  </figure>

</body>
</html>
